<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h2>视频录制助手</h2>
    
    <div class="video-list-container">
      <h3>检测到的视频</h3>
      <div id="video-list">
        <p>正在检测播放中的视频...</p>
      </div>
      <div id="video-selector" class="video-selector" style="display: none;">
        <label for="video-dropdown">选择要操作的视频：</label>
        <select id="video-dropdown" class="video-dropdown">
          <option value="">请选择视频</option>
        </select>
      </div>
      <button id="refresh-btn" class="primary-btn">刷新检测</button>
      <button id="page-refresh-btn" class="page-refresh-btn">刷新页面</button>
    </div>

    <div class="recording-container">
      <h3>录制功能</h3>
      <div class="recording-controls">
        <button id="start-recording-btn" class="record-btn">开始录制</button>
        <button id="stop-recording-btn" class="stop-btn" disabled>停止录制</button>
        <button id="screenshot-btn" class="screenshot-btn">视频截图</button>
      </div>
      <div id="recording-status" class="status-info">
        准备就绪
      </div>
    </div>

    <div id="status"></div>
  </div>
  <script src="popup.js"></script>
</body>
</html>
